<template>
  <div class="product">
    <!-- 搜索框 -->
    <div class="search">
        <template>
          <el-select
            v-model="searchValue"
            filterable  remote  reserve-keyword
             @clear="clear"
            placeholder="请输入姓名,如果不更新,点击右侧搜索按钮"
            :remote-method="remoteMethod"
            :loading="loading">
            <el-option
              v-for="item in searchList"
              :key="item.sId"
              :label="item.name"
              :value="item.name">
            </el-option>
          </el-select>
      </template>
      <!-- 搜索按钮 -->
			<el-button type="primary"
				icon="el-icon-search"
				@click="onSearchButtonClick"
				plain></el-button>
    </div>

    <!-- 班级选择 -->
		<div class="select-class">
			<!-- 框框 -->
			<el-form>
				<el-form-item label="选择班级:">
					<el-select v-model="classes"
						filterable
						@visible-change="classVisible"
						@change="classChange"
						placeholder="请选择">
						<el-option v-loading="selectLoading"
							label="全部"
							value="all"></el-option>
						<el-option :label="item"
							:value="item"
							v-for="(item, index) in classList"
							:key="index"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
		</div>

    <el-button type="primary" @click="addStu">增加项目</el-button>
    <el-button plain icon="iconfont icon-excel" @click="exportExcel">
        导出excel
    </el-button>
    <Dialog ref="stuDialog" :visible="visible" @ok="ok" @cancel="cancel"></Dialog>

    <!-- 表格 -->
    <template>
      <el-table v-loading="loading" :data="stuData" border style="width: 100%">
        <el-table-column align="center" label="头像" >
            <template v-slot="{ row:{headimgurl} }">
              <!-- {{row}} -->
               <el-avatar size="large" :src="headimgurl?headimgurl:'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png'" shape="square"></el-avatar>
            </template>
        </el-table-column>
        <el-table-column align="center" prop="name" label="姓名" >
        </el-table-column>
        <el-table-column align="center" prop="age" label="年龄" >
        </el-table-column>
        <el-table-column align="center" prop="class" label="班级" >
        </el-table-column>
        <el-table-column align="center" prop="degree" label="学历"> </el-table-column>
        <el-table-column align="center" width="300" prop="productUrl" label="项目"> </el-table-column>
        <el-table-column align="center" width="300" prop="cTime" label="创建时间"> </el-table-column>
        <el-table-column align="center"  label="操作" width="300">
            <template v-slot="{ row }">
                <el-button type="primary" @click="lookOver(row)" size="mini" icon="el-icon-view">查看</el-button>
                <el-button type="primary" @click="edit(row)" size="mini" icon="el-icon-edit">编辑</el-button>
                <el-button type="danger" @click="delStu(row)" size="mini" icon="el-icon-delete">删除</el-button>
            </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination hide-on-single-page @current-change = "pageChange"
        background :pageSize="pageSize"
        layout="prev, pager, next"
        :total="total">
      </el-pagination>

    </template>
  </div>
</template>

<script>
import Dialog from "@/components/Dialog";
import { mapState, mapActions, mapMutations } from "vuex";
import * as api from "@/api/stu";
import qee from "qf-export-excel"

export default {
  data() {
    return {
      params: {
					class: "",
					count: 5,
				},
      visible: false,
      stuData:[],
      loading: false,
      total:0,
      pageSize:0,
      classes: "", //select绑定的班级
      classList: [], //班级列表
      selectLoading: true,
      searchList: [],
      searchValue: "",
    };
  },
  meta: {
    title: "xyxmgl",
    name: "项目管理",
    icon: "iconfont icon-shangpinguanli",
  },
  components: { Dialog },
  created () {
      //获取表格数据
      this.getStuList()
  },
  methods: {
    //导出excel
    //导出excel
    exportExcel() {
            //导出的字段有哪些
            let titleList = [{
                title: '头像地址',
                key: 'headimgurl'
            }, {
                title: '名字',
                key: 'name'
            }, {
                title: '项目',
                key: 'productUrl'
            }]

            qee(titleList, this.stuData, '2205项目')

        },
    //增加
    addStu() {
      //清空dialog中的数据
      this.$refs.stuDialog.stuForm = {};
      this.$refs.stuDialog.title = '增加学员信息'
      this.visible = true;
    },
    //编辑
    edit(row){
        console.log(row);
        // console.log(this.$refs.stuDialog);
        // 数据回显
        this.$refs.stuDialog.stuForm = {...row}
        this.$refs.stuDialog.title = '编辑学员信息'
        this.visible = true;
    },
    // 删除
    delStu(row){
        // console.log(row.sId);
        this.$confirm('该操作将永久删除数据，是否继续','删除提示')
        .then(()=>{
            api.deleteStu(row.sId)
            .then(res => {
              if (res.data.state) {
                this.$message.success('删除成功')
                this.getStuList()
              }
            })
        })
        .catch(()=>{
          this.$message.error('已取消删除')
        })
    }
    ,
    //页码改变的时候
    pageChange(pageSize){
        this.getStuList(undefined, pageSize)
    },
    //获取学员列表数据的方法
    getStuList(count=5,page=1,classes){
      this.loading = true;
      api.getStuListApi(count,page,classes)
      .then(res => {
          console.log(res);
          if (res.data.state) {
              this.stuData = res.data.data
              this.total = res.data.total
              this.pageSize = count
              this.loading = false
          }
      })
    },

    // 班级选择框展开/收起触发的事件
			classVisible(isVisible) {
				//展开选择器的时候,loading变为ture
				this.selectLoading = true;
				//展开的时候需要获取数据
				//调用获取列表的方法
				// console.log(isVisible);
				if (isVisible) {
					//下拉框出现了
					//发送请求,获取班级列表
					api.getClassesApi().then((res) => {
						console.log(res);
						this.classList = res.data.data;
						// console.log(this.classList);
						this.selectLoading = false;
					});
				}
			},
  
    // 选择班级
			classChange(query) {
				console.log(query);
				//query就是选中的option
				//1.select展开的时候 需要展示所有的班级列表
				//2.选中班级列表的时候,要更新表格
				// console.log(query);
				//调用早已经封装好的GET_STULIST,传递班级就可以了
				// console.log(query);
				//当query等于all的时候,表示要展示所有的班级
				if (query === "all") {
					query = ""; //将query重新赋值为空 因为不传的话 后台就默认返回所有数据
				}
        let count,page
				this.getStuList(count=5,page=1,query);

			},


      onSearchButtonClick() {
				// 点击搜索按钮
				// console.log(this.searchValue);
				api.searchStuApi(null, this.searchValue, null).then((res) => {
          console.log(res.data);
					this.stuData = res.data.data
          this.total = res.data.total
          this.pageSize =res.data.count
				});
			},
      //查看学员信息
			lookOver(row) {
				//设置当前行的信息
				this.$router.push({ path: '/studentManager/studentprofile',query:row})
			},
      clear() {
				//情况输入框内容的时候,表格应该显示所有的内容
				// console.log(currentPage);
				this.currentPage = 1;
				// console.log(this.currentPage);
			},
			// 搜索框选中值发生变化的事件
			// searchTextChange(searchText) {
			// 	// console.log(searchText);
			// 	//发送请求,更新列表
			// 	//更新列表
			// 	api.searchStuApi(null, searchText, null).then((res) => {
			// 		this.currentPage = 1;//让分页器的数值初始化
			// 		this.getStuList(res.data); //vuex中更新表格数据的方法
			// 	});
			// },
			remoteMethod(query) {
				// 键盘弹起的时候获取输入值
				// console.log(query);
				this.searchValue = query;
				//向后台发起请求
				api.searchStuApi(null, query, null).then((res) => {
					// console.log(res);
					// console.log(res.data.data);
					//数组去重
					let norepeat = [];
					// let flag = true;
					for (let i = 0; i < res.data.data.length; i++) {
						let flag = true;
						for (let k = 0; k < norepeat.length; k++) {
							if (norepeat[k].name === res.data.data[i].name) {
								flag = false;
								break;
							}
						}
						if (flag) {
							norepeat.push(res.data.data[i]);
						}
					}
					// console.log(norepeat);
					this.searchList = norepeat;
				});
			},

    //点击了dialog确定按钮
    ok(formData) {
      console.log("dialogOpen");
      // console.log(formData);
      let dialogTitle = this.$refs.stuDialog.title

      if (dialogTitle==='增加学员信息') {
          api.addStu(formData).then((res) => {
          console.log(res);
          if (res.data.state) {
            //添加成功

            //更新列表
            
          }
        });

      }else if(dialogTitle==='编辑学员信息'){
          //发送编辑请求
          api.editStuApi(formData)
          .then(res => {
            console.log(res);
            if (res.data.state) {
                this.getStuList()
                this.$message.success('更新成功')
            }
          })
      }

      
      this.visible = false;
    },
    //点击了dialo取消定按钮
    cancel() {
      console.log("dialogClose");
      this.visible = false;
    },
  },
};
</script>

<style scoped lang="less">
 /deep/ i.icon-excel {
    color: green;
}

.search {
	line-height: 60px;
	text-align: left;
	margin: 20px 0;
	/deep/ .el-input__inner {
		width: 300px;
	}
}

.select-class {
	line-height: 40px;
	text-align: left;
	margin-bottom: 20px;
}
.stu-table .btn {
	width: 65px;
	height: 25px;
	padding: 0;
}
.pagination {
	margin-top: 20px;
}
/deep/ .exportExcel i.icon-excel {
	color: green !important;
	font-size: 20px;
	margin-right: 3px;
}

.exportExcel .el-button {
	padding: 4px 7px;
	float: right;
}
.exportExcel {
	margin-bottom: 10px;
	overflow: hidden;
}

</style>
